import React from "react"
import { View, StyleSheet, Text, TouchableOpacity } from "react-native"
import { colors, typography } from "app/theme"
import { MaterialIcons } from "@expo/vector-icons"
import { scale } from "react-native-size-matters"
import LoaderComponent from "app/components/Loader"

// TODO notifications pagination

const NotificationItem = ({ item, onPress }) => {
  var date = new Date(item?.datetime * 1000) // Generate date string

  return (
    <TouchableOpacity disabled={item?.read ? true : false} onPress={() => onPress(item?.id)}>
      {!item?.read && <View style={styles.notificationDot} />}
      <View style={styles.container}>
        {item?.loading ? (
          <View
            style={{
              flex: 1,
              justifyContent: "center",
              alignItems: "center",
            }}
          >
            <LoaderComponent />
          </View>
        ) : (
          <>
            <View>
              <MaterialIcons name="login" size={32} color="black" style={{ marginRight: 10 }} />
            </View>
            <View style={{ flex: 1 }}>
              <Text style={styles.lightText}>
                Client check in through kiosk -{" "}
                <Text style={styles.boldText}>
                  {item?.content} at {date.toLocaleTimeString("default")}
                </Text>
              </Text>
            </View>
          </>
        )}
      </View>
    </TouchableOpacity>
  )
}

const styles = StyleSheet.create({
  container: {
    backgroundColor: colors?.white,
    borderWidth: 1,
    borderColor: colors.grey,
    borderRadius: 10,
    padding: 15,
    flexDirection: "row",
    alignItems: "center",
    paddingVertical: scale(5),
  },

  boldText: {
    fontSize: scale(12),
    color: colors.text,
    fontFamily: typography.fonts.spaceGrotesk.semiBold,
  },
  lightText: {
    fontSize: 12,
    color: colors.text,
    fontFamily: typography.fonts.spaceGrotesk.light,
  },
  notificationDot: {
    position: "absolute",
    backgroundColor: "#D93636",
    height: scale(10),
    width: scale(10),
    borderRadius: 10,
    zIndex: 999,
    right: scale(12),
    top: -5,
  },
})

export default NotificationItem
